<template>
  <view class="container">
    <view class="user-card" v-if="userStore.isLogin">
      <image class="avatar" :src="userStore.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
      <view class="user-info">
        <text class="nickname">{{ userStore.nickname || '用户' }}</text>
        <text class="phone">{{ userStore.phone || '未绑定手机' }}</text>
      </view>
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
    
    <view class="function-area">
      <button class="primary-btn" @click="goToInfoPage" v-if="userStore.isLogin && !userStore.isInfoComplete">
        完善个人信息
      </button>
      
      <!-- GET请求示例按钮 -->
      <button class="primary-btn" @click="fetchGetData">调用GET接口(list?id=1)</button>
      
      <!-- GET请求结果展示 -->
      <view class="result-section" v-if="getResult">
        <text class="section-title">GET请求结果</text>
        <view class="result-item" v-for="(value, key) in getResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <!-- POST请求示例按钮 -->
      <button class="primary-btn" @click="fetchPostData">调用POST接口(list2, type=1)</button>
      
      <!-- POST请求结果展示 -->
      <view class="result-section" v-if="postResult">
        <text class="section-title">POST请求结果</text>
        <view class="result-item" v-for="(value, key) in postResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <!-- 文件下载示例按钮 -->
      <button class="primary-btn" @click="downloadFile">下载文件(filesDowm?hash='csadsadada')</button>
      
      <!-- 文件下载进度展示 -->
      <view class="download-progress" v-if="downloadProgress > 0 && downloadProgress < 100">
        <text>下载进度: {{ downloadProgress }}%</text>
        <progress :percent="downloadProgress" stroke-width="4" activeColor="#07c160" backgroundColor="#eeeeee"></progress>
      </view>
      
      <!-- FormData请求示例按钮 -->
      <button class="primary-btn" @click="pushDataWithFormData">调用FormData接口</button>
      
      <!-- FormData请求结果展示 -->
      <view class="formdata-result" v-if="formDataResult">
        <text class="section-title">FormData请求结果</text>
        <view class="result-item" v-for="(value, key) in formDataResult" :key="key">
          <text class="item-key">{{ key }}:</text>
          <text class="item-value">{{ value }}</text>
        </view>
      </view>
      
      <view class="loading" v-if="getLoading || postLoading || formDataLoading || downloadLoading">
        <text>加载中...</text>
      </view>
      
      <view class="error" v-if="getError || postError || formDataError || downloadError">
        <text>{{ getError || postError || formDataError || downloadError }}</text>
        <button @click="resetErrors">重新加载</button>
      </view>
      
      <view class="feature-list">
        <view class="feature-item">
          <image src="/static/feature1.png" mode="aspectFit"></image>
          <text>功能一</text>
        </view>
        <view class="feature-item">
          <image src="/static/feature2.png" mode="aspectFit"></image>
          <text>功能二</text>
        </view>
        <view class="feature-item">
          <image src="/static/feature3.png" mode="aspectFit"></image>
          <text>功能三</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, ref } from '@dcloudio/uni-app'
import { useUserStore } from '../../store/user'
import { get, post, postFormData, downloadFile } from '../../utils/request'

const userStore = useUserStore()

// GET请求相关数据
const getResult = ref(null)
const getLoading = ref(false)
const getError = ref('')

// POST请求相关数据
const postResult = ref(null)
const postLoading = ref(false)
const postError = ref('')

// 文件下载相关数据
const downloadProgress = ref(0)
const downloadLoading = ref(false)
const downloadError = ref('')

// FormData请求相关数据
const formDataResult = ref(null)
const formDataLoading = ref(false)
const formDataError = ref('')

onLoad(() => {
  // 检查登录状态
  if (!userStore.isLogin) {
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }
})

// 调用GET请求list?id=1
const fetchGetData = async () => {
  getLoading.value = true
  getError.value = ''
  
  try {
    // 调用get方法发送请求，参数通过params传递
    const res = await get('/list', {
      params: {
        id: 1
      },
      loading: false
    })
    
    if (res.success) {
      getResult.value = res.data || {}
      
      uni.showToast({
        title: 'GET请求成功',
        icon: 'success'
      })
    } else {
      getError.value = res.msg || 'GET请求失败'
    }
  } catch (error) {
    console.error('GET请求失败:', error)
    getError.value = error.message || '网络异常，请稍后重试'
  } finally {
    getLoading.value = false
  }
}

// 调用POST请求list2，参数type=1
const fetchPostData = async () => {
  postLoading.value = true
  postError.value = ''
  
  try {
    // 调用post方法发送请求，参数直接放在请求体中
    const res = await post('/list2', {
      type: 1
    }, {
      loading: false
    })
    
    if (res.success) {
      postResult.value = res.data || {}
      
      uni.showToast({
        title: 'POST请求成功',
        icon: 'success'
      })
    } else {
      postError.value = res.msg || 'POST请求失败'
    }
  } catch (error) {
    console.error('POST请求失败:', error)
    postError.value = error.message || '网络异常，请稍后重试'
  } finally {
    postLoading.value = false
  }
}

// 下载文件，调用filesDowm接口，参数hash='csadsadada'
const downloadFile = async () => {
  downloadLoading.value = true
  downloadError.value = ''
  downloadProgress.value = 0
  
  try {
    // 调用downloadFile方法下载文件
    const tempFilePath = await downloadFile('/filesDowm', {
      params: {
        hash: 'csadsadada'
      },
      loading: false, // 不使用默认的加载提示，自己控制
      onProgressUpdate: (res) => {
        // 更新下载进度
        downloadProgress.value = res.progress
      }
    })
    
    // 下载成功后打开文件
    uni.openDocument({
      filePath: tempFilePath,
      showMenu: true,
      success: () => {
        uni.showToast({
          title: '文件打开成功',
          icon: 'success'
        })
      },
      fail: (err) => {
        console.error('文件打开失败:', err)
        uni.showToast({
          title: '文件打开失败',
          icon: 'none'
        })
      }
    })
  } catch (error) {
    console.error('文件下载失败:', error)
    downloadError.value = error.message || '文件下载失败，请稍后重试'
  } finally {
    downloadLoading.value = false
    // 下载完成或失败后，重置进度条
    setTimeout(() => {
      downloadProgress.value = 0
    }, 1500)
  }
}

// 使用FormData格式调用pushData接口
const pushDataWithFormData = async () => {
  // 设置加载状态
  formDataLoading.value = true
  formDataError.value = ''
  
  try {
    // 准备FormData格式的数据
    // 在uni-app中，我们可以直接传递一个对象，框架会自动处理为FormData格式
    const formData = {
      name: 'cc' // 要传递的参数
    }
    
    // 调用postFormData方法发送请求
    const res = await postFormData('/pushData', formData, {
      loading: false // 不使用默认的加载提示，自己控制
    })
    
    // 处理接口返回的数据
    if (res.success) {
      formDataResult.value = res.data || {}
      
      // 显示成功提示
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
    } else {
      formDataError.value = res.msg || '提交失败'
    }
  } catch (error) {
    console.error('FormData请求失败:', error)
    formDataError.value = error.message || '网络异常，请稍后重试'
  } finally {
    // 无论成功失败，都要关闭加载状态
    formDataLoading.value = false
  }
}

// 重置错误信息
const resetErrors = () => {
  getError.value = ''
  postError.value = ''
  downloadError.value = ''
  formDataError.value = ''
}

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        userStore.logout()
      }
    }
  })
}

// 跳转到完善信息页面
const goToInfoPage = () => {
  uni.navigateTo({
    url: '/pages/userInfo/userInfo'
  })
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.user-info {
  flex: 1;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.phone {
  font-size: 28rpx;
  color: #999999;
}

.logout-btn {
  font-size: 28rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #ff4d4f;
  color: #ffffff;
}

.function-area {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.primary-btn {
  background-color: #07c160;
  color: #ffffff;
  margin-bottom: 30rpx;
}

/* 结果区域通用样式 */
.result-section,
.formdata-result {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
  color: #333333;
}

.result-item {
  display: flex;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eeeeee;
}

.result-item:last-child {
  border-bottom: none;
}

.item-key {
  font-size: 28rpx;
  color: #666666;
  margin-right: 10rpx;
}

.item-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
}

/* 下载进度样式 */
.download-progress {
  margin-bottom: 30rpx;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}

.download-progress text {
  font-size: 28rpx;
  color: #333333;
  display: block;
  margin-bottom: 10rpx;
}

/* 加载和错误提示样式 */
.loading,
.error {
  text-align: center;
  padding: 40rpx 0;
  color: #999999;
}

.error button {
  margin-top: 20rpx;
  font-size: 28rpx;
  background-color: #07c160;
  color: #ffffff;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
}

.feature-item {
  width: 33.33%;
  text-align: center;
  padding: 20rpx 0;
}

.feature-item image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.feature-item text {
  font-size: 28rpx;
  color: #333333;
}
</style>